<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 400px;
            height: 300px;
            background-color: pink;
            background-image: url(01.jpeg);
            background-repeat: no-repeat;
            /*background-size: 300px;*/
            /* background-size: 50%; */
            /* 当盒子宽高比例不是1:1，长度或高度铺满后不会往另一个方向再铺 */
            /* background-size: contain; */
            /* 保证图片尺寸宽或者高与盒子完全尺寸完全覆盖，会导致部分显示不出来 */
            background-size: cover;
            /*在公司业务需求中，基本都是和盒子比例是1:1，使用contain 和cover 效果一样*/

        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>